<!-- 今日入库查询 -->
<template>
  <!-- 增删刷新导出打印 -->
  <div class="nav">
    <el-button type="primary" @click="handleDerive"
      ><el-icon> <FolderOpened /> </el-icon>导出</el-button
    >
    <el-button type="primary" @click="handlePrint"
      ><el-icon> <Printer /> </el-icon>打印</el-button
    >
  </div>
  <div class="period">
    <!-- 查询 -->
    <div class="inquire">
      <span>供应名称</span>
      <el-input v-model="input1" class="w-50 m-2" size="small" />
      <span>入库单号</span>
      <el-input v-model="input2" class="w-50 m-2" size="small" />
      <span>入库日期</span>
      <el-date-picker
        v-model="value"
        type="daterange"
        size="small"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <el-button
        type="primary"
        size="small"
        style="margin-left: 10px"
        @click="handleSearch"
        >查询</el-button
      >
    </div>

    <!-- 表格 -->
    <div class="main">
      <el-table ref="multipleTableRef" :data="registerInfo" style="width: 100%">
        <el-table-column type="selection" ref="checked" />
        <el-table-column
          property="storageDate"
          label="入库日期"
          show-overflow-tooltip
        />
        <el-table-column
          property="supplierName"
          label="供应名称"
          show-overflow-tooltip
        />
        <el-table-column
          property="storeType"
          label="入库类型"
          show-overflow-tooltip
        />
        <el-table-column
          property="storeLeader"
          label="经办人"
          show-overflow-tooltip
        />
        <el-table-column
          property="storageOdd"
          label="入库单号"
          show-overflow-tooltip
        />
        <el-table-column
          property="storeName"
          label="仓库名称"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialNumber"
          label="编码"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialClass"
          label="名称"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialSpecificationModel"
          label="规格型号"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialUnit"
          label="单位"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialPrice"
          label="单价"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialInventory"
          label="数量"
          show-overflow-tooltip
        />
        <el-table-column
          property="materialWorth"
          label="金额"
          show-overflow-tooltip
        />

        <!-- 左侧操作按钮 -->
        <el-table-column fixed="left" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              @click="handleView(scope.row)"
              :dialogTableVisible="dialogTableVisible"
              style="margin-right: 12px"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 对话框 -->
    <!-- 查看详情 -->
    <el-dialog
      v-model="dialogTableVisible"
      title="入库材料检验查看"
      width="90%"
    >
      <el-table :data="gridData">
        <el-table-column property="storageDate" label="入库日期" />
        <el-table-column property="supplierName" label="供应名称" />
        <el-table-column property="storeType" label="入库类型" />
        <el-table-column property="storeLeader" label="经办人" />
        <el-table-column property="storageOdd" label="入库单号" />
        <el-table-column property="storeName" label="仓库名称" />
        <el-table-column property="materialNumber" label="编码" />
        <el-table-column property="materialClass" label="名称" />
        <el-table-column
          property="materialSpecificationModel"
          label="规格型号"
        />
        <el-table-column property="materialUnit" label="单位" />
        <el-table-column property="materialPrice" label="单价" />
        <el-table-column property="materialInventory" label="数量" />
        <el-table-column property="materialWorth" label="金额" />
      </el-table>
    </el-dialog>

    <!-- 分页器 -->
    <div class="foot">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        layout="total,prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { ElTable, ElMessage } from 'element-plus'
import { getMaterialInfo } from '../../api/getapi'
const value = ref('')
const input2 = ref('')
const input1 = ref('')
//查询
const handleSearch = () => {
  let obj: any = {}
  obj = {
    supplierName: input1.value,
    storageOdd: input2.value,
  }
  console.log(obj)
  // 排除空
  for (let key in obj) {
    if (obj[key] == '' || obj[key] == null) {
      delete obj[key]
    }
  }
  let filter = (condition: any, data: any) => {
    return data.filter((item: any) => {
      return Object.keys(condition).every((key) => {
        return String(item[key]).includes(String(condition[key]).trim())
      })
    })
  }
  registerInfo.value = filter(obj, tableData.value)
  if (value.value) {
    registerInfo.value = registerInfo.value.filter((item: any) => {
      return (
        new Date(item.storageDate).getTime() >
          new Date(value.value[0]).getTime() &&
        new Date(item.storageDate).getTime() <
          new Date(value.value[1]).getTime()
      )
    })
  }
  if (registerInfo.value.length == 0) {
    ElMessage({
      type: 'error',
      message: '没有相关信息',
    })
  }
}
//回车确认
const keyDown: any = (e: { keyCode: number }) => {
  if (e.keyCode == 13 || e.keyCode == 108) {
    handleSearch()
  }
}
//挂载
onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})
//挂载后
onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
})
//打印
const handlePrint = () => {
  console.log(114)
}
//导出
const handleDerive = () => {
  console.log(115)
}

//表格数据
const registerInfo = ref<ProjectInfo[]>([])
const tableData = ref<any>()
const getData = async () => {
  const result: any = await getMaterialInfo()
  tableData.value = result
  total.value = tableData.value.length
  show()
}
getData()
//表格查看数据
const gridData = ref<any>()
const dialogTableVisible = ref(false)
const handleView = (result: any) => {
  dialogTableVisible.value = true
  const arr = []
  arr.push(result)
  gridData.value = arr
}

//分页器
const total = ref()
//分页器数据
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const show = () => {
  registerInfo.value = tableData.value.slice(
    pageSize4.value * (currentPage4.value - 1),
    pageSize4.value * currentPage4.value,
  )
}
watch([currentPage4, pageSize4], (val) => {
  console.log('val', val)
  show()
})
</script>

<style lang="scss" scoped>
.inquire {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 1000px;
  height: 50px;

  span {
    margin: 0 10px;
    font-size: 15px;
  }

  .w-50 {
    width: 150px;
  }
}

.main {
  margin: auto;
  width: 98%;
  // height: 100%;
  border: 1px solid #ccc;

  .el-button {
    width: 40px;
    height: 15px;
  }
}

.foot {
  z-index: 1;
  background-color: #fff;
  position: fixed;
  right: 50px;
  bottom: 0;
  margin: auto;
}

.nav {
  display: flex;
  align-items: end;
  margin-right: 19px;
  float: right;
  // width: 350px;
  height: 40px;
}
</style>
